<template>
	<div class="login-container main-content">
		<div class="login-info animated fadeInLeft">
			<h2 class="login-title">中国质量认证中心</h2>
			<ul class="login-list">
				<li class="login-list-item">以“认证为民，品质共享“作为社会责任理念</li>
				<li class="login-list-item">以“至臻至诚，持之以恒“作为客户服务理念</li>
				<li class="login-list-item">坚持不懈致力于行业服务质量提升</li>
			</ul>
		</div>
		<div class="login-content animated fadeInRight">
			<div class="login-main">
				<h4>登录Pvue
					
				</h4>
				<el-tabs v-model="activeName">
		          	<el-tab-pane label="用户名" name="user">
		            <userLogin></userLogin>
		          	</el-tab-pane>
		          	<el-tab-pane label="手机号码" name="code">
		            	<codeLogin></codeLogin>
		          	</el-tab-pane>
			          <!-- <el-tab-pane label="第三方授权登录" name="third">
			            <thirdLogin></thirdLogin>
			          </el-tab-pane> -->
		        	</el-tabs>
			</div>			
		</div>
	</div>
</template>
<script>
	import userLogin from './userLogin'
	import codeLogin from './codeLogin'
	export default {
		name:'login',
		components:{
			userLogin,
			codeLogin
		},	
		data(){
			return {
				activeName:'user'
			}
		}
	}
</script>
<style scoped>
	.login-container{
		background: url('/static/img/login_bg1.jpg') no-repeat;
		background-size: cover;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.login-info{
		color: #fff;
	}
	.login-title{
		line-height: 90px;
	}
	.login-content{
		display: flex;
		justify-content: center;
		padding: 30px 50px 25px 50px;
		border-radius: 6px;
		box-shadow: 1px 1px 2px #eee;
		background: #fff;
		/* opacity: 0.2; */
	}
</style>